<template>
  <div class="home_wapper">
    <el-container>
      <el-aside width="auto">
        <happy-scroll color="rgba(0,0,0,0.5)" size="5" resize>
          <div>
            <el-menu
              :default-active="menuIndex"
              class="el-menu-vertical-demo"
              router
              unique-opened
              :collapse="isCollapse"
              @select="onselect"
            >
              <el-submenu :index="index+''" v-for="(item,index) in list" :key="index">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>{{item.authName}}</span>
                </template>
                <el-menu-item
                  :index="items.path"
                  v-for="(items,i) in item.children"
                  :key="i"
                >{{items.authName}}</el-menu-item>
              </el-submenu>
            </el-menu>
          </div>
        </happy-scroll>
      </el-aside>
      <el-container>
        <el-header>
          <div class="switch">
            <el-button type="primary" :icon="geticon" size="small" @click="onswitch"></el-button>
          </div>
          <div class="right">
              <home-user @exit="onexit"></home-user>
          </div>
        </el-header>
        <el-main>
          <happy-scroll color="rgba(0,0,0,0.5)" size="10" resize>
          <div>
              <router-view></router-view>
          </div>
          </happy-scroll>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { mapMutations } from "vuex";
import { log } from "util";
import homeUser from "../../components/home/user";
export default {
  created() {
    this.menus();
  },
  mounted() {},
  data() {
    return {
      list: [],
      isCollapse: false,
      menuIndex: localStorage.getItem("menuindex") || "users"
    };
  },
  // 方法
  methods: {
    menus() {
      this.$http
        .menus({})
        .then(res => {
          if (res.meta.status == 200) {
            this.list = res.data;
          } else {
            this.$message.error(res.meta.msg);
          }
        })
        .catch(res => {
          console.log(res);

          this.$message.error("网络错误");
        });
    },
    onswitch() {
      this.isCollapse = !this.isCollapse;
    },
    onselect(e) {
      localStorage.setItem("menuindex", e);
    },
    onexit(){
          this.$confirm('确定退出吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
              sessionStorage.clear();
                  this.$router.push('/login')
        }).catch(() => {
                
        });
    } 
  },
  //计算属性
  computed: {
    geticon() {
      return this.isCollapse ? "el-icon-s-fold" : "el-icon-s-unfold";
    }
  },
  // 监听属性
  watch: {},
  // 组件注册
  components: {
    'home-user':homeUser
  },
  // 组件销毁之前
  beforeDestroy() {}
};
</script>
<style lang="less" scoped>
.home_wapper {
  height: 100%;
  .el-container {
    height: 100%;
    .el-main {
      padding: 10px;
      background-color: #EAEDF1;
       /deep/ .happy-scroll-container{
           width: 100% !important;
      /deep/  .happy-scroll-content{
          width: 100% !important;
      }
      }
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;
    }
    .el-menu {
      border: none;
    }
    .el-aside {
    /deep/  .happy-scroll-container {
        width: auto !important;
      }
    }

    .switch {
      display: flex;
      align-items: center;
      height: 100%;
    }
  }
  .el-header{
    display: flex;
        .right{
          display: flex;
          flex:1;
    align-items: center;
    justify-content: flex-end;
  }
  }

}
</style>
